import React,{useState,useEffect,useContext} from 'react'
import ThemeContext from './context';

function useInput(initState){
    let [value,setValue] = useState(initState);
    return {
        value,
        onChange:(e) => setValue(e.target.value)
    }
}

//状态  修改状态的函数

function HookApp({flag}){
    // let [username,setUsername] = useState('lili');

    // let [password,setPassword] = useState('');

    // let changeName = (e) => setUsername(e.target.value);

    // let changePassword = (e) => setPassword(e.target.value);

    let username = useInput('lili'); //{value,onChange}

    let password = useInput('');


    let [count,setCount] = useState(1);

    let plus = () => setCount(count+1);

    useEffect(() => {
        console.log("=====")
        document.title = count;
    },[count])

    let [width,setWidth] = useState(window.innerWidth);

    let resize = () => {
        setWidth(window.innerWidth);
    }

    useEffect(() => {
        window.addEventListener('resize',resize)
        return () => { //componentWillUnmount
            //清除resize  
            window.removeEventListener('resize',resize);
        }
    },[width])

    const theme = useContext(ThemeContext);


    return <div>
        <input type="text" {...username}/>
        hook用户名：{username.value}

        <br/>

        <input type="text" {...password}/>
        hook密码：{password.value}

        <br/>

        {count}

        <button onClick={plus}>+</button>

        <br/>

        宽度{width}

        <div style={theme}>123</div>
    </div>
}


function Demo(){
    let [test,setTest] = useState('lili');
    console.log(test);
}


export default HookApp